<template>
  <el-container>
    <el-aside width="250px">
      <p class="title">
        <i class="el-icon-platform-eleme"></i>
        饿不饿外卖管理中心
      </p>

      <el-menu
        @select="selectmenu"
        :default-active="active"
        class="el-menu-vertical-demo"
        background-color="#00BCD4"
        text-color="#fff"
        active-text-color="#212121"
        router
        unique-opened
      >
        <div v-for="item in treelist" :key="item.i">
          <el-submenu v-if="item.children" :index="item.i">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="child in item.children"
                :key="child.i"
                :index="child.i"
                >{{ child.name }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-else :index="item.i">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in breadlist" :key="item"
            >{{ item }}
          </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="info">
          <span>欢迎你 {{ name }}</span>

          <div class="block" @click="$router.push('/Index/Accountinfo')">
            <el-avatar :size="60" :src="imgurl" class="porter"></el-avatar>
          </div>
        </div>
      </el-header>

      <el-main
        ><el-card class="box-card"> <router-view /> </el-card
      ></el-main>
    </el-container>
  </el-container>
</template>

<script>
import { $_accountinfo, $_checktoken } from "@/apis/user";
import bus from "@/utils/bus";
export default {
  created() {
    let routerchild = location.hash.substring(
      location.hash.lastIndexOf("/") + 1
    );
    this.active = routerchild;
    $_accountinfo({
      id: localStorage.id,
    }).then((res) => {
      this.name = res.data.accountInfo.account;
      this.imgurl = res.data.accountInfo.imgUrl;
    });
    bus.$on("refreshHeader", (val) => {
      this.imgurl = val;
    });
    $_checktoken({ token: localStorage.token }).then((res) => {
      console.log("token", res);
    });
    this.selectmenu(
      location.hash.substring(location.hash.lastIndexOf("/") + 1)
    );
  },
  data() {
    return {
      active: "Home",
      name: "请登录",
      imgurl: "",
      circleUrl: "",
      breadlist: [],
      treelist: [
        {
          i: "Home",
          name: "后台首页",
          icon: "el-icon-s-home",
          role: ["super", "normal"],
        },
        {
          i: "Order",
          name: "订单管理",
          icon: "el-icon-document",
          role: ["super", "normal"],
        },
        {
          i: "1",
          name: "商品管理",
          icon: "el-icon-document",
          role: ["super", "normal"],
          children: [
            { i: "Goodslist", name: "商品列表" },
            { i: "Goodsadd", name: "商品添加" },
            { i: "Goodssort", name: "商品分类" },
          ],
        },
        { i: "/Index/Storemanage", name: "店铺管理", icon: "el-icon-s-shop" },
        {
          i: "2",
          name: "账号管理",
          icon: "el-icon-user-solid",
          children: [
            { i: "Accountlist", name: "账号列表" },
            { i: "Accountadd", name: "账号添加" },
            { i: "Changepassword", name: "修改密码" },
          ],
        },
        {
          i: "3",
          name: "销售统计",
          icon: "el-icon-s-data",
          children: [
            { i: "Orderstatistcs", name: "订单统计" },
            { i: "Goodstatistics", name: "商品统计" },
          ],
        },
      ],
    };
  },
  methods: {
    selectmenu(index) {
      let arr = [];
      for (let obj of this.treelist) {
        //如果有二级菜单
        if (obj.children) {
          for (let item of obj.children) {
            if (item.i == index) {
              arr.push(obj.name, item.name);
            }
          }
        } else {
          if (obj.i == index) {
            arr.push(obj.name);
          }
        }
      }
      this.breadlist = arr;
    },
  },
  computed: {
    rolearr() {
      return this.treelist.filter((obj) =>
        obj.role.includes(localStorage.role)
      );
    },
  },
};
</script>
<style lang="less">
@import url("../assets/styles/them.less");
.el-container {
  height: 100%;
}
.el-header,
.el-footer {
  background-color: @base-color;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;

  .info {
    display: flex;
    align-items: center;
    .porter {
      margin-left: 10px;
    }
  }
}
.el-breadcrumb__inner {
  color: #fff !important;
}
.el-aside {
  background-color: @base-color2;
  color: #212121;
  text-align: center;
  line-height: 200px;
  .title {
    line-height: 60px;
    color: #fff;
    height: 60px;
    font-size: 20px;
  }
  .el-menu {
    border: none;
  }
}

.el-main {
  .box-card {
    background-color: @base-color;
    width: 100%;

    border: none;
    .el-card {
      overflow: none;
    }
  }
}
</style>
